<html>
<head>
<title>MathBox - examples</title>
<link rel=stylesheet href="index.css"/>
</head>
<body>

<div class="bigTitle">MathBox Examples</div>
<hr>
This webpage contains a collection of interactive mathematical visualizations built using 
<a class="toc" href="https://gitgud.io/unconed/mathbox">MathBox</a>: a library for rendering presentation-quality math diagrams in a browser using WebGL, built on top of <a class="toc" href="https://github.com/mrdoob/three.js/">Three.js</a>
and ShaderGraph. Most examples also utilize <a class="toc" href="http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage">dat.gui</a> for the user interface.
<hr>
This collection is hosted at <a class="toc" href="https://github.com/stemkoski/stemkoski.github.com">GitHub</a>.
<hr>
Last updated: 18 June 2016.
<hr>

<br/><br/>
<div class="fancy">
<a href="graph2d-hello.html" target="_blank">
<img src="html-images/2d-hello.png" class="superImage" />
<br/>MathBox Introduction</a>
<p class ="superText">
Illustrates how to create a graph of a 2D function <i>y = f(x)</i> in MathBox.
</p>
</div>

<br/><br/>
<div class="fancy">
<a href="dat-gui-demo.html" target="_blank">
<img src="html-images/dat-gui.png" class="superImage" />
<br/>dat.gui Demo</a>
<p class ="superText">
Illustrates how to set up the different data types using dat.gui: numbers, number sliders, text, booleans, colors, lists, functions, and folders.
</p>
</div>

<br/><br/>
<div class="fancy">
<a href="graph2d-gui.html" target="_blank">
<img src="html-images/2d-gui.png" class="superImage" />
<br/>Integrating MathBox with dat.gui</a>
<p class ="superText">
Graph of a 2D function <i>y = f(x)</i>. New features: 
<blockquote>
<ul>
<li> integration with dat.gui </li>
<li> function may be entered via text box; formula parsed via <a class="toc" href="https://silentmatt.com/javascript-expression-evaluator/">Silent Matt's JavaScript Expression Evaluator</a>
<li> adjustable parameters <i>a</i> and <i>b</i> can be used in the function definition</li>
<li> axes contain tick marks and corresponding labels </li>
</ul>
</blockquote>
</p>
</div>

<br/><br/>
<div class="fancy">
<a href="graph2d-basic.html" target="_blank">
<img src="html-images/2d-basic.png" class="superImage" />
<br/>2D Function Graph</a>
<p class ="superText">
Graph of a 2D function <i>y = f(x)</i>. New features: 
<ul>
<li> a trace point whose location is controlled by a slider, visibility is controlled by a textbox, and a label below the trace point displays its coordinates to two decimal places </li>
<li> axes are labelled, and y-bounds can be set to automatically fit themselves according to the minimum and maximum values of the function with the x-bounds.</li>
</ul>
</p>
</div>

<br/><br/>
<div class="fancy">
<a href="graph2d-implicit.html" target="_blank">
<img src="html-images/2d-implicit.png" class="superImage" />
<br/>2D Implicit Curve Graph</a>
<p class ="superText">
Graph of a 2D curve defined implicitly by <i>f(x,y) = g(x,y)</i>. Uses the marching squares algorithm to approximate the curve. Includes a variety of preset equations.
</p>
</div>

<br/><br/>
<div class="fancy">
<a href="graph3d-basic.html" target="_blank">
<img src="html-images/3d-basic.png" class="superImage" />
<br/>3D Function Graph</a>
<p class ="superText">
Graph of a 3D function <i>z = f(x, y)</i>. Includes adjustable parameters, various color schemes, and optional wireframe and shading.
</p>
</div>

<br/><br/>
<div class="fancy">
<a href="graph3d-deriv.html" target="_blank">
<img src="html-images/3d-deriv.png" class="superImage" />
<br/>3D Derivatives</a>
<p class ="superText">
Graph of a 3D function <i>z = f(x,y)</i>. Coordinates of a point entered as text. Includes optional graphs of x- and y- partial derivatives, tangent plane, directional derivatives, and the gradient at the given point.
</p>
</div>

<br/><br/>
<div class="fancy">
<a href="graph3d-surface.html" target="_blank">
<img src="html-images/3d-surface.png" class="superImage" />
<br/>Surfaces in 3D</a>
<p class ="superText">
Graph of a 2D surface <i>(x,y,z) = (f(u,v), g(u,v), h(u,v))</i> in 3D.
</p>
</div>

<br/><br/>
<div class="fancy">
<a href="graph3d-curve.html" target="_blank">
<img src="html-images/3d-curve.png" class="superImage" />
<br/>Curves in 3D</a>
<p class ="superText">
Graph of a curve <i>(x,y,z) = (f(t), g(t), h(t))</i> in 3D. Plots a variable size/color tube around the curve for easier visibility.
</p>
</div>
<!--
<div class="fancy">
<a name="zzzz"></a>
<a href="zzzz.html" target="_blank">
<img src="html-images/zzzz.png" class="superImage" />
<br/>zzzz</a>
<p class ="superText"> ... </p>
</div>
-->

</body>
</html>
